<template>
    <div>
      <div class="container">
        <button id="btnSampleUpload" v-show="SampleUpload.State === 'Start'">上传</button>
        <button @click = "doPause" v-show="SampleUpload.State === 'Pause'">暂停</button>
        <button @click = "doRestore" v-show="SampleUpload.State === 'Restore'">继续</button>
        <button @click = "doClear" v-show="SampleUpload.State === 'Clear'">清除</button>
        <button @click = "doDown" v-show="SampleUpload.State === 'Clear'">下载</button>
        用户编号:<input type="text" v-model="UserCode" />
        用户姓名:<input type="text" v-model="UserName" />
      </div>
      <div class="container">
        <span id="proSampleUpload">进度</span>
      </div>
      <div style="text-align: center;">
        <img :src = "CurImage" />
      </div>
    </div>
</template>

<script>
  import OSS from 'ali-oss';
  export default {
    name: 'FixUpload',
    data() {
      return {
        CurImage: "",
        UserCode:"",
        UserName:"",
        SampleUpload: {
          SN: "",
          FileSN: "",
          ObjName:"",
          FileName:"",
          LUrl:"",
          State: "Start"
        }
      }
    },
    updated(){

    },
    methods: {
      doPause() {
        let me = this;
        me.SampleUpload.State = "Restore";

        me.$nextTick(function() {
          me.SampleUpload.Uploader.Client.cancel();
        });
      },
      doRestore() {
        let me = this;
        me.SampleUpload.State = "Pause";

        me.$nextTick(function() {
          me.$Global.zcAliFile.doNormRestore({
            UserData:me.SampleUpload,
            fnUpingProgress:me.cbUpingProgress,
            fnUpingSuccess:me.cbUpingSuccess,
            fnUpingError:me.cbUpingError,
            Scope:me
          });
        });
      },
      doClear() {
        let me = this;
        me.SampleUpload.State = "Start";
        me.SampleUpload.FileSN = "";
        me.SampleUpload.Uploader.ProgTag.innerText = "";
        me.CurImage = "";
      },
      doDown(){
        let me = this;

         me.$Global.zcServer.DownOss({
           FileSN: me.SampleUpload.FileSN
         });
/*        me.$Global.zcAliFile.doDownload({
          AliOss:OSS,
          ObjName:me.SampleUpload.ObjName,
          FileName:me.SampleUpload.FileName,
          Scope:me
        });*/
      },
      cbFileAdded(options) {
        options.UserData.State = "Pause";
      },
      cbUpingProgress(percent, options) {
        options.UserData.Uploader.ProgTag.innerText = "完成:" + percent + "%";
      },
      cbUpingSuccess(resJson, options) {
        let me = this;
        console.log('suc:resJson:',resJson);
        console.log('suc:options:',options);
 /*       options.UserData.Uploader.ProgTag.innerText = "上传完成";
        options.UserData.State = "Clear";
        options.UserData.FileSN = resJson.data.SN;
        options.UserData.ObjName = resJson.data.ObjName;
        options.UserData.FileName = resJson.data.FileName;
        options.UserData.LUrl = resJson.data.LUrl;
        console.log('上传完成-结果',resJson);
        if(resJson.data.FileType === "图片文件"){
          me.CurImage = resJson.data.SUrl;
        }*/
      },
      cbUpingError(err, options) {
        console.log('err3',err);
        let isShowErr = true;
        if(typeof(err) == 'object' ){
          if(err.name == 'cancel'){
            isShowErr = false;
          }
        }
        if(isShowErr){
          window.alert('错误1:')
        }
      },
      doInitUp() {
        console.log('updated');
        let me = this;

        me.SampleUpload.Uploader = {};
        me.SampleUpload.Uploader.ProgTag = document.getElementById("proSampleUpload");

        // 调用上传-开始
        me.$Global.zcAliFile.doInit({
          AliOss:OSS,
          UserData:me.SampleUpload,
          FileCfg:{
            ButtonId: "btnSampleUpload",
            Accept: "image/png;image/jpeg;image/gif;image/tiff;image/bmp;video/mp4;video/quicktime;audio/mpeg;application/pdf;application/msword;application/vnd.ms-excel;application/vnd.ms-powerpoint;application/vnd.openxmlformats-officedocument.wordprocessingml.document;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;application/vnd.openxmlformats-officedocument.presentationml.presentation;",
            ExtName: ".jpeg,.jpg,.bmp,.png,.gif,.mp4,.mov,.mp3,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf",
            MaxSize:"500mb"
          },
          fnFileAdded:me.cbFileAdded,
          fnUpingProgress:me.cbUpingProgress,
          fnUpingSuccess:me.cbUpingSuccess,
          fnUpingError:me.cbUpingError,
          Scope:me
        });
        // 调用上传
      }
    },
    mounted() {
      let me = this;
      me.doInitUp();
    }
  };
</script>

<style scoped>
  .center {
    text-align: center;
  }
  .container {
    margin-top: 50px;
    text-align: center;
  }
</style>
